<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的仪表盘 - 企业培训平台</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        /* 可以根据需要添加一些样式 */
        body {
            display: flex; /* 使用Flexbox布局 */
            min-height: 100vh; /* 确保body至少占据整个视口高度 */
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f7f6;
        }

        .main-content {
            flex-grow: 1; /* 主内容区域占据剩余空间 */
            padding: 20px;
            /* 如果有左侧边栏，保留此间距，否则可以移除 */
            /* margin-left: 250px; */
        }

        .page-title {
            color: #333;
            margin-bottom: 25px;
            font-size: 2em;
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
        }

        .dashboard-grid {
            display: grid;
            /* 响应式网格：在小屏幕上1列，中屏幕上2列，大屏幕上3列 */
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px; /* 卡片之间的间距 */
            margin-top: 20px;
        }

        .dashboard-card {
            background-color: #fff;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* 确保内容和按钮底部对齐 */
        }
        .dashboard-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        }
        .dashboard-card h2 {
            color: #007bff;
            margin-top: 0;
            margin-bottom: 15px;
            font-size: 1.5em;
        }
        .dashboard-card p {
            color: #666;
            font-size: 0.95em;
            line-height: 1.6;
            margin-bottom: 20px; /* 增加段落与按钮的距离 */
            flex-grow: 1; /* 让段落填充可用空间 */
        }
        .dashboard-card .btn {
            display: block; /* 按钮占据整行 */
            width: 100%;
            padding: 12px 0; /* 上下内边距，左右由width控制 */
            font-size: 1.1em;
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }
        .btn-primary { background-color: #007bff; color: white; border: none; }
        .btn-primary:hover { background-color: #0056b3; transform: translateY(-2px); }
        .btn-info { background-color: #17a2b8; color: white; border: none; }
        .btn-info:hover { background-color: #117a8b; transform: translateY(-2px); }
        .btn-secondary { background-color: #6c757d; color: white; border: none; }
        .btn-secondary:hover { background-color: #545b62; transform: translateY(-2px); }
        .btn-warning { background-color: #ffc107; color: #212529; border: none; }
        .btn-warning:hover { background-color: #e0a800; transform: translateY(-2px); }
        .btn-dark { background-color: #343a40; color: white; border: none; }
        .btn-dark:hover { background-color: #1d2124; transform: translateY(-2px); }
        .btn-success { background-color: #28a745; color: white; border: none; }
        .btn-success:hover { background-color: #1e7e34; transform: translateY(-2px); }

        /* 消息提示样式 */
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .alert-success {
            color: #155724;
            background-color: #d4edda;
            border-color: #c3e6cb;
        }
        .alert-danger {
            color: #721c24;
            background-color: #f8d7da;
            border-color: #f5c6cb;
        }

        .user-info-card {
            background-color: #e9ecef;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .user-info-card h2 {
            color: #333;
            margin-top: 0;
        }
        .user-info-card p {
            color: #555;
            margin-bottom: 8px;
        }

    </style>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>

<div class="main-content">
    <div class="container">
        <h1 class="page-title">学生仪表盘</h1>

        <div th:if="${successMessage}" class="alert alert-success">
            <p th:text="${successMessage}"></p>
        </div>
        <div th:if="${errorMessage}" class="alert alert-danger">
            <p th:text="${errorMessage}"></p>
        </div>

        <div class="user-info-card">
            <h2>欢迎您，<span th:text="${loggedInUser.username}">用户</span>！</h2>
            <p>您的角色是: <span th:text="${loggedInUser.role}"></span></p>
            <p th:if="${student != null and student.stuName != null}">姓名: <span th:text="${student.stuName}"></span></p>
            <p th:if="${student != null and student.stuScore != null}">当前积分: <span th:text="${student.stuScore}"></span></p>
        </div>


        <div class="dashboard-grid">
            <div class="dashboard-card">
                <h2>我的班级</h2>
                <p>查看您所属的班级及其课程。</p>
                <a th:href="@{/student/classes}" class="btn btn-primary">进入我的班级</a>
            </div>

<!--            //student-course-browse.html-->
            <div class="dashboard-card">
                <h2>浏览课程</h2>
                <p>发现并选择您感兴趣的课程。</p>
                <a th:href="@{/course/browse}" class="btn btn-info">浏览可选课程</a>
            </div>
            <div class="dashboard-card">
                <h2>我的课程</h2>
                <p>查看您已购买或正在学习的课程。</p>
                <a th:href="@{/student/my-courses}" class="btn btn-secondary">进入我的课程</a>
            </div>
            <div class="dashboard-card">
                <h2>我的收藏</h2>
                <p>查看您收藏的所有课程，方便后续学习。</p>
                <a th:href="@{/course/collected-courses}" class="btn btn-success">查看我的收藏</a>
            </div>
            <div class="dashboard-card">
                <h2>问答社区</h2>
                <p>在这里提出学习中遇到的问题，或帮助他人解答疑惑。</p>
                <a th:href="@{/qa/browse}" class="btn btn-secondary">进入问答社区</a>
            </div>
            <div class="dashboard-card">
                <h2>我的购物车</h2>
                <p>查看您已加入购物车的课程。</p>
                <a th:href="@{/student/cart}" class="btn btn-warning">查看购物车</a>
            </div>

            <div class="dashboard-card">
                <h2>浏览线下实践</h2>
                <p>发现并报名参加所有可用的线下实践活动。</p>

                <a th:href="@{/student/practice/browse}" class="btn btn-info">浏览所有实践</a>
            </div>
            <div class="dashboard-card">
                <h2>我的实践报名</h2>
                <p>查看和管理您已报名的所有线下实践活动。</p>
                <a th:href="@{/student/practice/my-enrollments}" class="btn btn-primary">查看我的报名</a>
            </div>
            <div class="dashboard-card">
                <h2>我的问答</h2>
                <p>查看您提出或回答的问题。</p>
                <a th:href="@{/student/my-qa}" class="btn btn-secondary">进入我的问答</a>
            </div>
<!--            <div class="dashboard-card">-->
<!--                <h2>学习记录</h2>-->
<!--                <p>回顾您的学习进度和历史记录。</p>-->
<!--                <a th:href="@{/student/learning-history}" class="btn btn-info">查看学习记录</a>-->
<!--            </div>-->
            <div class="dashboard-card">
                <h2>资讯中心</h2>
                <p>查看最新的平台新闻、活动公告和行业动态。</p>
                <a th:href="@{/info/browse}" class="btn btn-success">进入资讯中心</a>
            </div>
        </div>
    </div>
</div>

<div th:replace="~{fragments/footer :: footer}"></div>
</body>
</html>